<!--
PivotalMySQLWeb

Copyright (c) 2017-Present Pivotal Software, Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Pivotal MySQL*Web - Welcome</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <link rel="stylesheet" th:href="@{'themes/' + ${session.themeMain}}" media="screen" />
    <link rel="stylesheet" th:href="@{'themes/' + ${session.themeMin}}" />

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.open-modal').click(function(){
                $('#myModal').modal('show');
            });
        });
    </script>
    <style>
        .navbar-brand
        {
            position: absolute;
            width: 100%;
            left: 0;
            margin: auto;
            margin-left: 48%;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand navbar-left">
                <a href="#">
                    <img src="images/PVLG-PivotalMYSQLWeb-SM.png"
                         th:src="@{images/PVLG-PivotalMYSQLWeb-SM.png}"
                         alt="Brand" />
                </a>
            </div>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right nav-pills">
                <li>
                    <a th:href="@{/home}">
                        <img src="images/b_home.png"
                             th:src="@{images/b_home.png}"
                             alt="Home"
                             border="0"/>
                        Home
                    </a>
                </li>
                <li>
                    <a th:href="@{/exit}">
                        <img src="images/s_loggoff.png"
                             th:src="@{images/s_loggoff.png}"
                             alt="Logout"
                             border="0"/>
                        Logout
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a th:href="@{/prefs}">
                                <img src="images/b_props.png"
                                     th:src="@{images/b_props.png}"
                                     alt="Preferences"
                                     border="0"/>
                                Preferences
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/endpoints}">
                                <img src="images/s_notice.png"
                                     th:src="@{images/s_notice.png}"
                                     alt="Endpoints"
                                     border="0"/>
                                Heath Endpoints
                            </a>
                        </li>
                        <li>
                            <a href="http://docs.pivotal.io/p-mysql/1-7/" target="_new">
                                <img src="images/b_docs.png"
                                     th:src="@{images/b_docs.png}"
                                     alt="p-mysql docs"
                                     border="0"/>
                                p-mysql Doc
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a th:href="@{/refresh}">
                                <img src="images/eye.png"
                                     th:src="@{images/eye.png}"
                                     alt="Refresh"
                                     border="0"/>
                                Refresh
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Schema Objects <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a th:href="@{/tables}">
                                <img src="images/s_tbl.png"
                                     th:src="@{images/s_tbl.png}"
                                     alt="Tables"
                                     border="0"/>
                                Tables[<span th:text="${session.schemaMap.Table}" />]
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/views}">
                                <img src="images/b_views.png"
                                     th:src="@{images/b_views.png}"
                                     alt="Views"
                                     border="0"/>
                                Views[<span th:text="${session.schemaMap.View}" />]
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/indexes}">
                                <img src="images/b_index.png"
                                     th:src="@{images/b_index.png}"
                                     alt="Indexes"
                                     border="0"/>
                                Indexes[<span th:text="${session.schemaMap.Index}" />]
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/constraints}">
                                <img src="images/constraints.png"
                                     th:src="@{images/constraints.png}"
                                     alt="Constraints"
                                     border="0"/>
                                Constraints[<span th:text="${session.schemaMap.Constraint}" />]
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a th:href="@{/query}">
                                <img src="images/b_sql.png"
                                     th:src="@{images/b_sql.png}"
                                     alt="SQL Worksheet"
                                     border="0"/>
                                SQL Worksheet
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Themes <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/selecttheme(theme='default')}">Default</a></li>
                        <li><a th:href="@{/selecttheme(theme='sandstone')}">Sandstone</a></li>
                        <li><a th:href="@{/selecttheme(theme='cyborg')}">Cyborg</a></li>
                        <li><a th:href="@{/selecttheme(theme='slate')}">Slate</a></li>
                        <li><a th:href="@{/selecttheme(theme='spacelab')}">Spacelab</a></li>
                    </ul>
                </li>
                <li class="dropdown" th:if="${session.servicesListSize > 0}">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Instances <b class="caret"></b></a>
                    <ul class="dropdown-menu" style="min-width: 300px;">
                        <div th:each="service : ${session.servicesList}">
                            <li><a th:href="@{/switchinstance(instanceType=${service.type},instanceName=${service.name})}">Switch to <span th:text="${service.name}" /></a></li>
                        </div>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <img src="images/b_usrlist.png"
                             th:src="@{images/b_usrlist.png}"
                             alt="Users"
                             border="0"/>
                        [User: <span th:text="${session.user} ? ${session.user} : 'Not Logged In'">Not Logged In</span>]
                    </a>
                </li>
            </ul>
        </div>

    </div>
</div>
<!-- NAVBAR CODE END -->

<div class="bs-example">
    <div class="page-header">
        <h1>Pivotal MySQL*Web - <small>Welcome</small></h1>
    </div>
</div>

<div th:if="${session.autobound == null}">
    <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Success!</strong> Connected to MySQL using JDBC URL <strong th:text="${session.url}"></strong>
    </div>
</div>

<div th:if="${session.autobound != null}">
    <div class="alert alert-success fade in">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Success!</strong> Connected to MySQL using <strong th:text="${session.autobound}"></strong> database
    </div>
</div>

<ul class="nav nav-tabs">
    <li class="active">
        <a th:href="@{/home}">
            <img src="images/b_home.png"
                 th:src="@{images/b_home.png}"
                 alt="Home"
                 border="0"/>
            Home
        </a>
    </li>
    <li>
        <a th:href="@{/tables}">
            <img src="images/s_tbl.png"
                 th:src="@{images/s_tbl.png}"
                 alt="Tables"
                 border="0"/>
            Tables[<span th:text="${session.schemaMap.Table}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/views}">
            <img src="images/b_views.png"
                 th:src="@{images/b_views.png}"
                 alt="Views"
                 border="0"/>
            Views[<span th:text="${session.schemaMap.View}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/indexes}">
            <img src="images/b_index.png"
                 th:src="@{images/b_index.png}"
                 alt="Indexes"
                 border="0"/>
            Indexes[<span th:text="${session.schemaMap.Index}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/constraints}">
            <img src="images/constraints.png"
                 th:src="@{images/constraints.png}"
                 alt="Constraints"
                 border="0"/>
            Constraints[<span th:text="${session.schemaMap.Constraint}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/query}">
            <img src="images/b_sql.png"
                 th:src="@{images/b_sql.png}"
                 alt="SQL Worksheet"
                 border="0"/>
            SQL Worksheet
        </a>
    </li>
    <li>
        <a th:href="@{/viewconmap}">
            <img src="images/Connection.gif"
                 th:src="@{images/Connection.gif}"
                 alt="View Connections"
                 border="0"/>
            Connections
        </a>
    </li>
    <li>
        <a th:href="@{/endpoints}">
            <img src="images/s_notice.png"
                 th:src="@{images/s_notice.png}"
                 alt="Endpoints"
                 border="0"/>
            Endpoints
        </a>
    </li>
    <li>
        <a th:href="@{/userinfo}">
            <img src="images/s_info.png"
                 th:src="@{images/s_info.png}"
                 alt="Information"
                 border="0"/>
            Information
        </a>
    </li>
    <li>
        <a th:href="@{/variables}">
            <img src="images/s_vars.png"
                 th:src="@{images/s_vars.png}"
                 alt="Database Variables"
                 border="0"/>
            Variables
        </a>
    </li>
</ul>

<br />

<div class="container">
    <!--Row with two columns divided in 1:2 ratio-->
    <div class="row">
        <div class="col-xs-6">
            <blockquote>
                <p>
                    The MySQL for PCF product delivers dedicated instances on demand — “Database as a Service” — to PCF users. When
                    installed, the tile deploys and maintains a single Service Broker that is responsible for PCF integration. The
                    service is configured with sane defaults, following the principle of least surprise for a general-use relational
                    database service
                </p>
                <small>by <cite>Pivotal</cite></small>
                <br />
                <p>
                    <b>Current Preferences</b> &nbsp;
                    <a th:href="@{/prefs}">
                        <img src="images/b_props.png"
                             th:src="@{images/b_props.png}"
                             alt="Preferences"
                             border="0"/>
                        Preferences
                    </a>
                    <br />
                    Size of SQL History List : <span class="label label-info" th:text="${session.prefs.historySize}"/> <br />
                    Records to Display in Worksheet: <span class="label label-info" th:text="${session.prefs.maxRecordsinSQLQueryWindow}"/>
                <p/>
                <input type="button" class="btn btn-primary open-modal" value="About Pivotal MySQL*Web" />
                </p>
            </blockquote>
        </div>
        <div class="col-xs-6">
            <p>
                <b>Schema Objects</b> &nbsp;
                <ul>
                    <li>
                        <a th:href="@{/tables}">
                            <img src="images/s_tbl.png"
                                 th:src="@{images/s_tbl.png}"
                                 alt="Tables"
                                 border="0"/>
                            Tables[<span th:text="${session.schemaMap.Table}" />]
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/views}">
                            <img src="images/b_views.png"
                                 th:src="@{images/b_views.png}"
                                 alt="Views"
                                 border="0"/>
                            Views[<span th:text="${session.schemaMap.View}" />]
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/indexes}">
                            <img src="images/b_index.png"
                                 th:src="@{images/b_index.png}"
                                 alt="Indexes"
                                 border="0"/>
                            Indexes[<span th:text="${session.schemaMap.Index}" />]
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/constraints}">
                            <img src="images/constraints.png"
                                 th:src="@{images/constraints.png}"
                                 alt="Constraints"
                                 border="0"/>
                            Constraints[<span th:text="${session.schemaMap.Constraint}" />]
                        </a>
                    </li>
                </ul>
                <b>Select Theme</b> &nbsp;
                <ul>
                    <li>
                        <a th:href="@{/selecttheme(theme='default')}">Default</a> &nbsp; | &nbsp;
                        <a th:href="@{/selecttheme(theme='sandstone')}">Sandstone</a> &nbsp; | &nbsp;
                        <a th:href="@{/selecttheme(theme='cyborg')}">Cyborg</a> &nbsp; | &nbsp;
                        <a th:href="@{/selecttheme(theme='slate')}">Slate</a> &nbsp; | &nbsp;
                        <a th:href="@{/selecttheme(theme='spacelab')}">Spacelab</a>
                    </li>
                </ul>

                <div th:if="${databaseList != null}">
                    <h3>Current Databases</h3>
                    <table class="table table-hover table-bordered table-striped table-condensed">
                        <thead>
                        <div th:each="columnName : ${databaseList.columnNames}">
                            <th style="text-align:center"><span th:text="${columnName}"/></th>
                        </div>
                        </thead>
                        <tbody>
                        <div th:each="rows : ${databaseList.rows}">
                            <tr>
                                <div th:each="columnName : ${databaseList.columnNames}">
                                    <td style="text-align:center"><span th:text="${rows.get(columnName)}"/></td>
                                </div>
                            </tr>
                        </div>
                        </tbody>
                    </table>
                </div>
            </p>
        </div>
    </div>
</div>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h1 class="modal-title">About Pivotal MySQL*Web</h1>
            </div>
            <div class="modal-body">
                <p style="font-size: 16px">
                    PivotalMySQL*Web is a browser based SQL tool rendered using Bootstrap UI for MySQL PCF service instances which allows you to run SQL commands and view schema objects from a browser based interface. It includes the following capabilities
                    <ul style="font-size: 16px">
                        <li>Multiple Command SQL worksheet for DDL and DML</li>
                        <li>Run Explain Plan across SQL Statements </li>
                        <li>View/Run DDL command against Tables/Views/Indexes/Constraints</li>
                        <li>Command History</li>
                        <li>Auto Bind to Pivotal MySQL Services bound to the Application within Pivotal Cloud Foundry (PCF)</li>
                        <li>Manage JDBC Connections</li>
                        <li>Load SQL File into SQL Worksheet from Local File System</li>
                        <li>SQL Worksheet with syntax highlighting support</li>
                        <li>HTTP GET request to auto login without a login form</li>
                        <li>Export SQL query results in JSON or CSV formats</li>
                        <li>Generate DDL for schema objects</li>
                    </ul>
                    <h3> More Information</h3>
                    <a href="https://github.com/pivotal-cf/PivotalMySQLWeb" style="font-size: 16px" target="_top">
                        https://github.com/pivotal-cf/PivotalMySQLWeb
                    </a>
                    <br />
                </p>
            </div>
            <div class="modal-footer">
                <div style="text-align:right">
                    <img src="images/PoweredByPivotal1.png"
                         th:src="@{images/PoweredByPivotal1.png}"
                         alt="MySQLWebFooter"
                         border="0"/>
                    <br />
                    &copy; 2017. <a href="mailto:papicella@pivotal.io">Pas Apicella</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="footer :: copy"></div>

</body>
</html>